<!-- 自定义TabBar组件，这里是定义，然后要在每个组件中引用 -->
<!-- import tabbar from "@/components/tabbar/tabbar.vue"; -->
<!-- <tabbar selected="0"></tabbar> -->

<template>
  <!--  外部Div  -->
  <view class="tab-bar">
    <!--  循环每个 item 菜单 -->
    <view v-for="(item,index) in tabBarList" :key="index"
          :class="{'tab-bar-item': true,currentTar: selected == item.id}"
          @click="switchTab(item, index)">
      <view class="tab_text" :style="{color: selected == index ? selectedColor : color}">
        <image class="tab_img" :src="selected == index ? item.selectedIconPath : item.iconPath"></image>
        <view>{{ item.text }}</view>
      </view>
    </view>
  </view>
</template>




<script setup>
import { defineProps, ref } from 'vue'
// 子组件传递参数
const props = defineProps({
  selected: {
    type: Number,
    default: 0
  }
})
// 未选中颜色
let color = ref('#000')
// 选中的颜色
let selectedColor = ref('#ffb2b2')
// 菜单栏集合 - 与 pages.json -> tabbar 配置一样
let tabBarList = ref([{
				"pagePath": "/pages/index/index",
				// "text": "首页",
				"iconPath": "../../static/tabbar/home.png",
				"selectedIconPath": "../../static/tabbar/homeact.png"
			},
			{
				"pagePath": "/pages/tool/tool",

				// "text": "工具",
				"iconPath": "../../static/tabbar/tool.png",
				"selectedIconPath": "../../static/tabbar/toolact.png"
			},
			{
				"pagePath": "/pages/myhome/myhome",
				// "text": "我的",
				"iconPath": "../../static/tabbar/my.png",
				"selectedIconPath": "../../static/tabbar/myact.png"
			}
		])
// 跳转tabBar菜单栏
const switchTab = (item) => {

  let url = item.pagePath;
  
  uni.switchTab({
    url,
	success: () => {
	            //我想成功后修改按iconPath为
	        }
  })

}
// 隐藏原tabBar
uni.hideTabBar()
</script>



<style lang="less" scoped>
// 外部装修
.tab-bar {
    position: fixed;
    bottom: 30rpx;
    left: 35rpx;
    right: 35rpx;
    height: 80rpx;
    // background: rgba(255, 255, 255, 0.2);
    padding: 15rpx;
    border-radius: 25rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    // backdrop-filter: blur(8px);
    // -webkit-backdrop-filter: blur(8px);
    // box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    z-index: 999;



    // 给每个 item 设置样式
 .tab-bar-item {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 80rpx;
        padding: 8rpx;

        // 限制每个icon的大小
     .tab_img {
            width: 50rpx;
            height: 50rpx;
        }

        // 限制文字大小
  //    .tab_text {
  //           font-size: 20rpx;
  //           margin-top: 5rpx;
  //           flex: 1;
  //           // color: #fff;
		
		// 	padding-left: 20rpx;
		// 	font-family: 'fontali';  
  //       }
    }
}
</style>